<template>
  <div id="create-staff-modal">
    <table>
      <tr>
        <td>职工名:</td>
        <td><a-input v-model:value="staff.name"></a-input></td>
      </tr>
      <tr>
        <td>性别:</td>
        <td>
          <a-radio-group v-model:value="staff.gender">
            <a-radio-button value="MALE">{{t('words.male')}}</a-radio-button>
            <a-radio-button value="FEMALE">{{t('words.female')}}</a-radio-button>
          </a-radio-group>
        </td>
      </tr>
      <tr>
        <td>邮箱:</td>
        <td><a-input v-model:value="staff.email"></a-input></td>
      </tr>
      <tr>
        <td>电话:</td>
        <td><a-input v-model:value="staff.phone"></a-input></td>
      </tr>
      <tr>
        <td>用户名:</td>
        <td><a-input v-model:value="staff.account.username"></a-input></td>
      </tr>
      <tr>
        <td>密码:</td>
        <td><a-input v-model:value="staff.account.password"></a-input></td>
      </tr>
      <tr>
        <td>部门:</td>
        <td>

          <a-select
            v-model:value="staff.department.id"
            style="width: 120px"
          >
            <a-select-option :key="department.id" v-for="department in departments" :value="department.id">{{department.name}}</a-select-option>
          </a-select>
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import useDepartmentTable from '@composable/department-table';

const props = defineProps({
  staff: {
    type: Object
  },
  t: {
    type: Function
  }
});

const { data } = useDepartmentTable(props.t);
const departments = data;

</script>

<style scoped>

</style>